<template>
	<div class="page">
		<div class="top">
			<el-table :cell-style="cellStyle" :header-cell-class-name="cellHeadStyle"
       :data="dataList" size="small" v-loading="loading" height="300px">
				<!-- <el-table-column prop="name" show-overflow-tooltip label="任务">
					<template slot-scope="scope">
						{{scope.row.name}}
						<el-button v-if="scope.row.back" type="warning" size="mini" @click="callback(scope.row)">撤销
						</el-button>
					</template>
				</el-table-column> -->
				<!-- <el-table-column prop="vars.title" show-overflow-tooltip min-width="180px" label="标题" >
				</el-table-column> -->
				<el-table-column prop="vars.title" min-width="180px" show-overflow-tooltip label="标题">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" @click="detail(scope.row)">{{scope.row.vars.title}}</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="processDefinitionName" label="名称" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="status" show-overflow-tooltip label="状态" >
					<template slot-scope="scope">
						<el-tag :type="scope.row.level" effect="dark" size="mini">{{scope.row.status}} </el-tag>
					</template>
				</el-table-column> 
				<el-table-column prop="vars.userName" label="发起人" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="endTime" show-overflow-tooltip label="完成时间">
					<template slot-scope="scope">
						{{scope.row.endTime | formatDate}}
					</template>
				</el-table-column>
				<!-- <el-table-column fixed="right" :key="Math.random()" header-align="center" align="center" width="100"
					label="操作">
					<template slot-scope="scope">
						<el-button type="text" size="mini" icon="el-icon-view" @click="detail(scope.row)">历史
						</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				 :page-size="pageSize" :total="total" background
				layout="total, prev, pager, next">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import tableStyles from '../../utils/mixins.js'
	import pick from 'lodash.pick'
	export default {
		inject: ['reload'],
		mixins: [tableStyles],
		data() {
			return {
				searchForm: {
					beginDate: '',
					endDate: ''
				},
				searchDates: '',
				dataList: [],
				pageNo: 1,
				pageSize: 8,
				total: 0,
				loading: false,
				visible: false,
				dataListSelections: [],
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit('pick', [start, end])
						}
					}]
				}
			}
		},
		activated() {
			this.refreshList()
		},
		watch: {
			searchDates() {
				if (this.searchDates) {
					this.searchForm.beginDate = this.searchDates[0]
					this.searchForm.endDate = this.searchDates[1]
				} else {
					this.searchForm.beginDate = ''
					this.searchForm.endDate = ''
				}
			}
		},
		methods: {
			// 获取数据列表
			refreshList() {
				this.loading = true
				this.$http({
					url: '/flowable/task/historic/',
					method: 'get',
					params: {
						'pageNo': this.pageNo,
						'pageSize': this.pageSize
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						// console.log("111",data)
						this.dataList = data.page.list
						this.total = data.page.count
						this.loading = false
					}
				})
			},
			todo(row) {
				this.reload();
				this.$http.get('/flowable/task/getTaskDef', {
					params: {
						taskId: row.task.id,
						taskName: row.task.name,
						taskDefKey: row.task.taskDefinitionKey,
						procInsId: row.task.processInstanceId,
						procDefId: row.task.processDefinitionId,
						procDefKey: row.task.processDefKey,
						status: row.status
					}
				}).then(({
					data
				}) => {
					if (data.success) {
						this.$router.push({
							path: '/flowable/task/TaskForm',
							// attend:0,作为审批办理,已办时 差旅，非差旅冲销金额回显标识
							query: {
								formTitle: `${row.vars.title}`,
								attend: 0,
								title: `审批【${row.task.name || ''}】`,
								...pick(data.flow, 'formType', 'formReadOnly', 'formUrl', 'procDefKey',
									'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title',
									'businessId')
							}
						})
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},
			detail(row) {
				this.reload();
				this.$http.get('/flowable/task/getTaskDef', {
					params: {
						taskDefKey: row.taskDefinitionKey,
						procInsId: row.processInstanceId,
						procDefId: row.processDefinitionId
					}
				}).then(({
					data
				}) => {
					if (data.success) {
						this.$router.push({
							path: '/flowable/task/TaskFormDetail',
							// attend:0,作为审批办理,已办时 差旅，非差旅冲销金额回显标识    dis用于实报和核定金额 历史还是办理时禁用
							query: {
								readOnly: true,
								attend: 0,
								dis: 0,
								taskId: row.executionId,
								title: `${row.processDefinitionName}【${row.name}】`,
								formTitle: `${row.processDefinitionName}`,
								...pick(data.flow, 'formType', 'formUrl', 'procDefKey', 'taskDefKey',
									'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')
							}
						})
					}
				})
			},
			// 取回
			callback(row) {
				console.log(row)
				this.$confirm(`确定撤销该已办任务吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$http.post('/flowable/task/callback', {
						'processInstanceId': row.processInstanceId,
						'preTaskDefKey': row.taskDefinitionKey,
						'preTaskId': row.id,
						'currentTaskId': row.currentTask.id,
						'currentTaskDefKey': row.currentTask.taskDefinitionKey
					}).then(({
						data
					}) => {
						this.loading = false
						if (data && data.success) {
							this.$message.success(data.msg)
							this.refreshList()
						}
					})
				})
			},
			resetSearch() {
				this.searchDates = ''
				this.$refs.searchForm.resetFields()
				this.$nextTick(() => {
					this.refreshList()
				})
			}
		}
	}
</script>
